<!--
 * @Author: wei_jt@ecidi.com
 * @Date: 2019-07-22 11:04:00
 * @LastEditors: chen_yt
 * @LastEditTime: 2022-04-08 14:37:05
 * @Description: 数据权限详情
 -->
<template>
  <fks-dialog
    :visible.sync="show"
    :append-to-body="true"
    destroy-on-close
    width="960px"
    :title="title"
    @close="close"
    @opened="open"
  >
    <div slot="title">
      <i
        v-if="form.operate_type == 'add'"
        class="fks-icon-plus"
      />
      <i
        v-if="form.operate_type == 'edit'"
        class="fks-icon-edit"
      />
      {{ title || transferEnum(title) }}
    </div>
    <fks-form
      ref="form"
      :model="form"
      label-width="100px"
      :rules="rules"
    >
      <fks-form-item
        :span="12"
        lead
        :label="LANG.DATA_NAME"
        required
        prop="scopeName"
      >
        <fks-input
          v-model="form.scopeName"
          maxlength="50"
          show-word-limit
        />
      </fks-form-item>
      <fks-form-item
        :span="12"
        required
        prop="scopeCode"
      >
        <span slot="label">
          {{ LANG.DATA_CODE }}
        </span>
        <fks-input
          v-model="form.scopeCode"
          maxlength="50"
          show-word-limit
          :placeholder="LANG.DATA_CODE_TIP"
          :disabled="form.operate_type != 'add'"
        />
      </fks-form-item>
      <fks-form-item
        v-if="form.scopeType != 1"
        :span="24"
        lead
        :label="LANG.RULE_TYPE"
        prop="type"
      >
        <fks-radio-group
          v-model="form.scopeType"
          size="medium"
        >
          <fks-radio-button
            v-for="item in scopeTypes"
            :key="item.code"
            :label="Number(item.code)"
          >
            {{ item[$lang] }}
          </fks-radio-button>
        </fks-radio-group>
      </fks-form-item>
      <fks-form-item
        v-if="form.scopeType == 1"
        :span="12"
        lead
        :label="LANG.RULE_TYPE"
        prop="type"
      >
        <fks-radio-group
          v-model="form.scopeType"
          size="medium"
        >
          <fks-radio-button
            v-for="item in scopeTypes"
            :key="item.code"
            :label="Number(item.code)"
          >
            {{ item[$lang] }}
          </fks-radio-button>
        </fks-radio-group>
      </fks-form-item>
      <fks-form-item
        v-if="form.scopeType == 1"
        :span="12"
        :label="LANG.RESOURCE_TREE_NAME"
      >
        <fks-select
          v-model="form.custom"
          style="width: 100%"
        >
          <fks-option
            v-for="item in treeList"
            :key="item.treeUrl"
            :label="item.treeName"
            :value="item.treeUrl"
          />
        </fks-select>
      </fks-form-item>
      <fks-form-item
        v-if="form.scopeType != 2"
        :span="10"
        :label="LANG.RULE_COLUMN"
      >
        <fks-input
          v-model="form.scopeColumn"
          :placeholder="LANG.RULE_COLUMN_TIP"
          maxlength="255"
          show-word-limit
        />
      </fks-form-item>

      <fks-form-item
        v-if="form.scopeType != 2"
        :span="4"
        :class="{ 'form-item': true, noLable: $lang != 'zh-CN' }"
      >
        <fks-select
          v-model="form.scopeRule"
          style="width: 100%"
          clearable
        >
          <fks-option
            v-for="item in dataRules"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="
              form.scopeType == 1 &&
                item.value.indexOf('in') == -1 &&
                item.value.indexOf('notIn') == -1
            "
          />
        </fks-select>
      </fks-form-item>
      <fks-form-item
        v-if="
          form.scopeType == 0 &&
            form.scopeRule != 'isNull' &&
            form.scopeRule != 'isNotNull'
        "
        ref="reference"
        :span="10"
        :class="{ 'form-item': true, noLable: $lang != 'zh-CN' }"
      >
        <fks-input
          v-if="form.scopeRule == 'between' || form.scopeRule == 'notBetween'"
          v-model="form.scopeValue"
          :placeholder="LANG.RULE_VALUE_INPUT_TIP"
          maxlength="255"
          show-word-limit
        />
        <fks-select
          v-else
          v-model="form.scopeValue"
          filterable
          clearable
          style="width: 100%"
          :placeholder="LANG.RULE_VALUE_SELECT_TIP"
          @blur="selectScopeValue"
        >
          <fks-option
            v-for="item in scopeList"
            :key="item.value"
            :value="item.value"
          >
            <span style="float: left">{{ item.value }}</span>
            <span style="float: right">{{ item.label }}</span>
          </fks-option>
        </fks-select>
      </fks-form-item>
      <template v-if="form.scopeType == 1">
        <fks-form-item
          :span="10"
          :class="{ 'form-item': true, noLable: $lang != 'zh-CN' }"
          prop="scopeValue"
        >
          <resource-select
            v-model="form.scopeValueList"
            :url="form.custom"
          />
        </fks-form-item>
      </template>
      <template v-if="form.scopeType == 2">
        <fks-form-item :label="LANG.CUSTOM_RULES">
          <fks-input
            v-model="form.scopeValue"
            :placeholder="LANG.CUSTOM_RULES_TIP"
            type="textarea"
          />
        </fks-form-item>
      </template>
      <fks-form-item
        :label="LANG.VISIBLE_COLUMN"
        prop="visibleColumn"
      >
        <fks-input
          v-model="form.visibleColumn"
          :placeholder="LANG.VISIBLE_COLUMN_TIP"
          maxlength="255"
          show-word-limit
        />
      </fks-form-item>
      <fks-form-item
        :label="LANG.AUTH_CLASS"
        required
        prop="scopeClass"
      >
        <fks-input
          v-model="form.scopeClass"
          maxlength="255"
          :placeholder="LANG.AUTH_CLASS_TIP"
          show-word-limit
        />
      </fks-form-item>
      <fks-form-item
        :span="12"
        prop="isDefault"
        class="defaultItem"
      >
        <span slot="label">
          {{ LANG.IS_DEFAULT }}
        </span>
        <fks-switch v-model="form.isDefault" />
      </fks-form-item>
      <fks-form-item
        :span="12"
        :label="LANG.ACTIVATE"
        prop="enable"
        class="defaultItem"
      >
        <fks-switch v-model="form.enable" />
      </fks-form-item>
      <fks-form-item>
        <div
          v-if="form.isDefault"
          style="color: #ddd"
        >
          {{ LANG.DATA_PERMISSION_OPEN_TIP }}
        </div>
        <div
          v-else
          style="color: #ddd"
        >
          {{ LANG.DATA_PERMISSION_CLOSE_TIP }}
        </div>
      </fks-form-item>
      <fks-form-item
        :label="LANG.REMARK"
        prop="remark"
      >
        <fks-input
          v-model="form.remark"
          type="textarea"
          maxlength="255"
          show-word-limit
        />
      </fks-form-item>
    </fks-form>
    <template
      slot="footer"
      style="text-align: right"
    >
      <fks-button
        type="primary"
        icon="fks-icon-check"
        @click="submit"
      >
        {{ LANG.SAVE }}
      </fks-button>
    </template>
  </fks-dialog>
</template>
<script>
import * as Auth from '../api';
import { ENUM } from '@/store/State/stateTypes';
import ResourceSelect from '../components/ResourceSelect';
import { AUTH_PORTAL } from '@/store/Getter/getterTypes.js';
export default {
  name: 'AuthDetail',
  components: {
    ResourceSelect,
  },
  props: {
    data: {
      default() {
        return {
          scopeName: '',
          scopeType: '',
          scopeCode: '',
          scopeColumn: '',
          scopeValue: '',
          scopeRule: '',
          isDefault: false,
          enable: true,
          scopeClass: '',
          remark: '',
          isGeneral: true,
        };
      },
    },
    visible: {
      type: Boolean,
      default: false,
    },
    menuId: {
      default: '',
    },
    buttonId: {
      default: '',
    },
  },
  data() {
    return {
      form: Object.assign(
        {
          isDefault: false,
          enable: true,
          scopeType: 0,
          scopeValue: '',
          scopeValueList: [],
        },
        this.data
      ),
      metas: [],
      meta: {
        key: '',
        value: '',
      },
      baseCode: '',
      metaIndex: -1,
      dialogVisible: false,
      show: this.visible,
      buttonList: [],
      treeList: [],
    };
  },
  computed: {
    multiPortal() {
      return this.$store.getters.multiPortal;
    },
    isGeneral() {
      return this.$store.getters[AUTH_PORTAL].portalId ? false : true;
    },
    dataRules() {
      if (this.form.scopeType == 1) {
        return [
          { label: '包含', value: 'in' },
          { label: '不包含', value: 'notIn' },
        ];
      }
      return [
        { label: '等于', value: '=' },
        { label: '不等于', value: '!=' },
        { label: '大于', value: '&gt;' },
        { label: '小于', value: '&lt;' },
        { label: '大于等于', value: '&gt;=' },
        { label: '小于等于', value: '&lt;=' },
        { label: '为空', value: 'isNull' },
        { label: '不为空', value: 'isNotNull' },
        { label: '模糊等于', value: 'like' },
        { label: '模糊不等于', value: 'likeNot' },
        { label: '介于之间', value: 'between' },
        { label: '不介于之间', value: 'notBetween' },
        { label: '包含', value: 'in' },
        { label: '不包含', value: 'notIn' },
      ];
    },
    scopeList() {
      let systemList = ['&gt;', '&lt;', '&gt;=', '&lt;='];

      if (systemList.includes(this.form.scopeRule)) {
        return [
          { label: '系统日期', value: '#{sysDate}' },
          { label: '系统时间', value: '#{sysTime}' },
        ];
      }
      return [
        { label: '用户名', value: '#{userName}' },
        { label: '用户ID', value: '#{userId}' },
        { label: '用户组织机构', value: '#{userOrgNo}' },
        { label: '系统日期', value: '#{sysDate}' },
        { label: '系统时间', value: '#{sysTime}' },
        { label: '用户岗位', value: '#{userPostNo}' },
      ];
    },
    title() {
      switch (this.form.operate_type) {
        case 'add':
          return this.LANG.ADD;
        case 'view':
          return this.LANG.VIEW;
        default:
          return this.LANG.EDIT;
      }
    },
    scopeTypes() {
      return this.$store.state[ENUM].scopeType || [];
    },
    rules() {
      let validateCode = (rule, value, callback) => {
        if (!/^[a-zA-Z0-9]+(:[a-zA-Z0-9]*)*[a-zA-Z0-9]$/.test(value)) {
          callback(new Error(this.LANG.MISTAKE));
        } else {
          callback();
        }
      };
      return {
        code: [{ validator: validateCode, trigger: 'blur' }],
      };
    },
    portal() {
      return this.$store.state.portal;
    },
  },
  watch: {
    show(val) {
      this.form = Object.assign(
        {
          isDefault: false,
          enable: true,
          scopeType: 0,
          scopeValue: '',
          scopeValueList: [],
          scopeRule: 'in',
        },
        this.data
      );
      this.form.isGeneral = this.form.isGeneral ?? this.isGeneral;
      if (this.form.scopeType == 1) {
        this.form.scopeValueList = this.form.scopeValue.split(',');
      }
    },
    'form.scopeType': {
      handler: function (nval, oval) {
        if (nval == '1') {
          if (this.form.scopeRule && this.form.scopeRule == 'notIn') {
            return false;
          }
          this.form.scopeRule = 'in';
        }
        if (nval == '2') {
          this.form.scopeColumn = '';
          this.form.scopeRule = 'userCustom';
        }
        if (nval == '0' && oval == '2') {
          this.form.scopeRule = '=';
        }
      },
    },
    visible() {
      this.show = this.visible;
    },
  },
  created() {
    Auth.getDataScopeTree()
      .then((res) => {
        if (res.status) {
          this.treeList = res.data ? res.data : [];
        }
      })
      .catch(() => {
        this.treeList = [];
      });
  },
  methods: {
    open() {
      this.$refs.form.clearValidate();
    },
    selectScopeValue(e) {
      this.form.scopeValue =
        e.target.value == '' ? this.form.scopeValue : e.target.value;
    },
    submit() {
      let action = 'saveDataScope';
      if (this.form.operate_type == 'add') {
        action = 'addDataScope';
        this.form.type = this.$store.getters[AUTH_PORTAL].type;
      }
      if (this.form.scopeType == 1 && this.form.scopeValueList) {
        this.form.scopeValue = this.form.scopeValueList.join(',');
      }
      this.form.menuId = this.menuId;
      this.form.buttonId = this.buttonId;
      if (!this.form.isGeneral) {
        this.form.portalId = this.$store.getters[AUTH_PORTAL].portalId;
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          Auth[action](this.form)
            .then((res) => {
              if (res.status) {
                if (this.form.operate_type == 'add') {
                  this.$message.success(this.LANG.ADD_SUCCESS);
                } else {
                  this.$message.success(this.LANG.EDIT_SUCCESS);
                }
                this.form = {};
                const data = JSON.parse(JSON.stringify(res.data));
                // this.$parent.expendList = [authId] // 设置路由树的默认展开节点，让父页面的对应子节点在数据更新后展开
                this.$emit('refresh');
                this.close();
              }
            })
            .catch(() => {});
        }
      });
    },
    close() {
      this.show = false;
      this.$emit('update:visible', this.show);
    },
  },
};
</script>
<style lang="scss" scoped>
.routerMeta-header {
  width: 100%;
  padding: 0 10px;
  border: 1px solid #f1f3f7;
  border-bottom: none;
  text-align: right;
  background: #f5fa;
}

.edit-input {
  .fks-input__inner,
  .fks-textarea__inner {
    border-width: 0;
    resize: none;
    background-color: #fff;

    &:hover {
      background-color: #f5f7fa;
    }

    &:focus {
      border-width: 1px;
      resize: vertical;
      background-color: #fff;

      + .fks-input__suffix {
        opacity: 1;
      }
    }
  }

  .fks-input__suffix {
    opacity: 0;
  }

  &:hover {
    .fks-cascader__label {
      border-radius: 4px;
      background-color: #f5f7fa;
    }
  }
}

.fawkes-form-item.is-error .edit-input {
  .fks-input__inner,
  .fks-textarea__inner {
    border-width: 1px;
    background-color: #fff;
  }
}

.show-suffix {
  .fks-input__suffix {
    opacity: 1;
  }
}

.except-input {
  padding: 0 15px;
}

::v-deep .fks-dialog__body {
  padding-bottom: 0;
}

::v-deep .fks-tree__empty-block {
  min-height: 36px;
}
.form-item {
  ::v-deep .fks-form-item__content {
    margin-left: 0 !important;
  }
}
.defaultItem {
  margin-bottom: 0 !important;
}
.noLable {
  ::v-deep .fks-form-item__content {
    margin-top: 30px;
  }
}
</style>

